<script setup>
  import { toRefs } from 'vue'
  import { useField } from 'vee-validate'

  import { uniqueId } from '@/helpers/utils'
  /** A checkbox meant to be used in a multi-selection scenario
   *
   * This checkbox is meant to be used in a multi-checkbox scenario (typically with CheckboxList
   *
   * For standalone boolean checkbox, see BooleanCheckbox
   */
  const props = defineProps({
    modelValue: {
      type: null,
    },
    label: String,
    description: {
      type: String,
      default: '' ,
    },

    name: String,
    value: {
      type: [String, Number],
    },
    divCss: {
      type: String,
      default: "toggle",
    },
    editable: { type: Boolean, default: true },
  })
  const tagId = uniqueId(props.name)

  // we are using toRefs to create reactive references to `name` and `value` props
  // this is important because vee-validate needs to know if any of these props change
  // https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
  const { name } = toRefs(props)
  const { checked, handleChange } = useField(name, undefined, {
    type: 'checkbox',
    checkedValue: props.value,
  })
</script>
<template>
  <div class='form-group'>
    <div :class='divCss'>
      <label :for='tagId'>
        <input
          type='checkbox'
          :id='tagId'
          :checked='checked'
          @change='handleChange(value)'
          :value='value'
          :name='name'
          :disabled='!editable'
        />
        <span>{{ label }}</span>
      </label>
    </div>
    <div class='help-block' v-if='description' v-html='description' />
  </div>
</template>
